let Department = {
   template:`
   <div class="department">
   <div class="w">
     <el-container>
       <el-aside width="200px">
         <el-tree
           :data="data"
           :props="defaultProps"
           draggable
           @node-drop="handleDrop"
           @node-click="handleNodeClick"
         ></el-tree>
       </el-aside>
       <el-container>
         <el-header class="el-header"> 部门管理</el-header>
         <el-main>
           <div class="btn">
             <a-button class="btn_children" type="primary" icon="plus-circle" @click="showModal">
               新增
             </a-button>
             <a-button class="btn_children" type="primary" icon="up">
               上移
             </a-button>
             <a-button class="btn_children" type="primary" icon="down">
               下移
             </a-button>
             <a-button class="btn_children" type="primary" icon="delete">
               删除
             </a-button>
           </div>
           <a-form-model
             ref="ruleForm"
             :model="ruleForm"
             :rules="rules"
             v-bind="layout"
           >
             <a-form-model-item label="上级部门" prop="pass">
               <a-tree-select
                 v-model="value"
                 style="width: 100%"
                 :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                 :tree-data="treeData"
                 placeholder="Please select"
                 tree-default-expand-all
               >
               </a-tree-select>
             </a-form-model-item>
             <a-form-model-item label="部门名称" prop="checkPass">
               <a-input
                 v-model="ruleForm.checkPass"
                 type="text"
                 autocomplete="off"
               />
             </a-form-model-item>
             <a-form-model-item label="显示顺序" prop="check">
               <a-input
                 v-model="ruleForm.check"
                 type="text"
                 autocomplete="off"
               />
             </a-form-model-item>
             <a-form-model-item label="重点学科" prop="age">
               <a-tree-select
                 v-model="values"
                 style="width: 100%"
                 :tree-data="treeDatas"
                 tree-checkable
                 :show-checked-strategy="SHOW_PARENT"
                 search-placeholder="Please select"
               >
               </a-tree-select>
             </a-form-model-item>
             <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
               <a-button type="primary" @click="submitForm('ruleForm')">
                 保存
               </a-button>
               <a-button
                 style="margin-left: 10px"
                 @click="resetForm('ruleForm')"
               >
                 重置
               </a-button>
             </a-form-model-item>
           </a-form-model>

           <a-modal
             v-model="visible"
             ok-text="确认"
             cancel-text="取消"
             @ok="hideModal"
           >
             <p>Bla bla ...</p>
             <p>Bla bla ...</p>
             <p>Bla bla ...</p>
           </a-modal>
         </el-main>
       </el-container>
     </el-container>
   </div>
 </div>
   `,
   name: "Department",
   data() {
      let checkPending;
      let validatePass = (rule, value, callback) => {
        {
          if (this.ruleForm.checkPass !== "") {
            this.$refs.ruleForm.validateField("checkPass");
          }
          callback();
        }
      };
      let validatePass2 = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("Please input the password again"));
        } else {
          callback();
        }
      };
      return {
        visible: false,
        values: [],
        treeDatas: [],
        SHOW_PARENT,
        value: "",
        ruid: "",
        ruids: [],
        treeData: [
          {
            title: "部门",
            children: [],
          },
        ],
        ruleForm: {
          pass: "",
          checkPass: "",
          age: "",
        },
        rules: {
          pass: [{ required: true, validator: validatePass, trigger: "change" }],
          checkPass: [
            { required: true, validator: validatePass2, trigger: "change" },
          ],
          check: [{ validator: validatePass2, trigger: "change" }],
        },
        layout: {
          labelCol: { span: 4 },
          wrapperCol: { span: 14 },
        },
        data: [
          {
            label: "部门",
            children: [],
          },
        ],
        defaultProps: {
          children: "children",
          label: "label",
        },
      };
    },
    watch: {
      value(value) {
        this.ruleForm.pass = value;
        this.ruid = value;
        return this.ruid;
      },
      values(value) {
        this.ruids = value;
        return this.ruids;
      },
    },
    mounted() {
      //获取tree数据
      this.departmentTree();
    },
    methods: {
      //获取tree数据
      departmentTree() {
        department({
          type: "department",
          rootnode: {
            RUID: "0",
            exist: "0",
            show: "0",
          },
          deep: -1,
          field: "RUID,name,parentid",
          key: {
            RUID: "ruid",
            name: "name",
            children: "children",
          },
          filter: [],
          order: [
            {
              fieldname: "name",
              type: "D",
            },
          ],
        }).then((res) => {
          let bead = {};
          let treeData = {};
          res.nodes.forEach((item, index) => {
            bead = { label: item.name, parentid: index, ruid: item.ruid };
            treeData = { title: item.name, value: item.ruid, key: index };
            this.treeData[0].children.push(treeData);
            this.data[0].children.push(bead);
          });
        });
        //重点科学
        department({
          type: "column",
          rootnode: {
            RUID: "1ad180a50009a40bce",
            exist: "1",
            show: "0",
          },
          deep: -1,
          field: "RUID,name,parentid",
          key: {
            RUID: "ruid",
            name: "name",
            children: "children",
          },
          filter: [],
          order: [
            {
              fieldname: "name",
              type: "D",
            },
          ],
        }).then((res) => {
          let treeDatas = {};
          let children = [];
          let key = "";
          let keys = "";
          res.nodes.forEach((item, index) => {
            key = item.parentid + "/" + index;
            if (!item.children) {
              return;
            }
            item.children.forEach((item, index) => {
              keys = item.parentid + "/" + index;
              children = [{ title: item.name, value: item.ruid, key: keys }];
            });
            treeDatas = {
              title: item.name,
              value: item.ruid,
              key: key,
              children: children,
            };
            this.treeDatas.push(treeDatas);
          });
        });
      },
      //拖拽完成
      handleDrop(draggingNode, dropNode, dropType, ev) {
        //改变或的数据
        //  console.log( dropNode.parent.data.children);
        // console.log('tree drop: ', dropNode.label, dropType);
      },
      handleNodeClick(datas) {
        if (datas.label == "部门") {
          this.$message.success("根节点不可选", 2.5);
          return;
        } else {
          this.ruleForm.checkPass = datas.label;
          this.ruleForm.check = datas.parentid;
          this.value = "部门";
        }
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //保存
            saveObject({
              type: "department",
              codeflag: "1",
              object: {
                name: this.ruleForm.checkPass,
                RUID: this.ruid,
                parentid: this.ruleForm.check,
                coresubject: this.ruids.toString(),
              },
            }).then((res) => {
              if (res.cxajaxrc == "0") {
                this.$message.success("保存成功", 2.5);
              } else {
                this.$message.error("保存失败", 2.5);
              }
            });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.value = "";
        this.values = [];
      },
    //新增
     showModal() {
        this.visible = true;
      },
      hideModal() {
        this.visible = false;
      }
    },
}

